
const difficultySelect = document.getElementById('difficulty');
const wordElement = document.getElementById('word');
const textInput = document.getElementById('text');
const scoreElement = document.getElementById('score');
const timeElement = document.getElementById('time');
const endGameContainer = document.getElementById('end-game-container');
const finalScoreElement = document.getElementById('final-score');
const finalDifficultyElement = document.getElementById('final-difficulty');
const playAgainBtn = document.getElementById('play-again-btn');
const settingsBtn = document.getElementById('settings-btn');
const settingsContainer = document.getElementById('settings');
const closeSettingsBtn = document.getElementById('close-settings');

const words = [
    'const', 'let', 'input', 'image', 'form','style', 'display', 'container', 'element', 'class',
    'document', 'background', 'transition', 'transform', 'translate', 'border', 'radius','margin', 'padding','select',
    'javascript', 'html', 'css', 'function', 'variable', 'array', 'object', 'method', 'property', 'event',
    'listener', 'dom', 'browser', 'window', 'console', 'debug', 'error', 'success', 'animation', 'game'
];


let randomWord;
let score = 0;
let time = 10;
let isGameOver = false;
let timeInterval;


let difficulty = localStorage.getItem('difficulty') ||'medium';
difficultySelect.value = difficulty;


function initGame() {
    addWordToDOM();
    textInput.focus();
    timeInterval = setInterval(updateTime, 1000);
}


function getRandomWord() {
    return words[Math.floor(Math.random() * words.length)];
}


function addWordToDOM() {
    randomWord = getRandomWord();
    wordElement.textContent = randomWord;
    
   
    wordElement.classList.add('opacity-0', 'scale-90');
    setTimeout(() => {
        wordElement.classList.remove('opacity-0', 'scale-90');
    }, 10);
}


function updateScore() {
    score++;
    scoreElement.textContent = score;
    
    
    scoreElement.classList.add('scale-125', 'text-secondary');
    setTimeout(() => {
        scoreElement.classList.remove('scale-125', 'text-secondary');
    }, 300);
}


function updateTime() {
    time--;
    timeElement.textContent = time;
    
    
    if (time <= 5) {
        timeElement.classList.add('text-danger', 'animate-pulse');
    }
    
    if (time === 0) {
        gameOver();
    }
}


function gameOver() {
    isGameOver = true;
    clearInterval(timeInterval);
    
    
    finalScoreElement.textContent = score;
    finalDifficultyElement.textContent = 
        difficulty === 'easy' ? '简单' : 
        difficulty ==='medium' ? '中等' : '困难';
    
    
    endGameContainer.classList.remove('opacity-0', 'pointer-events-none');
    endGameContainer.querySelector('div').classList.remove('scale-95');
    endGameContainer.querySelector('div').classList.add('scale-100');
    
    
    wordElement.classList.add('opacity-0', 'scale-50');
    textInput.disabled = true;
}

function restartGame() {
    score = 0;
    time = difficulty === 'easy' ? 15 : difficulty ==='medium' ? 10 : 8;
    isGameOver = false;
    
  
    scoreElement.textContent = score;
    timeElement.textContent = time;
    timeElement.classList.remove('text-danger', 'animate-pulse');
    
    endGameContainer.classList.add('opacity-0', 'pointer-events-none');
    endGameContainer.querySelector('div').classList.remove('scale-100');
    endGameContainer.querySelector('div').classList.add('scale-95');
    
    
    textInput.value = '';
    textInput.disabled = false;
    addWordToDOM();
    
   
    clearInterval(timeInterval);
    timeInterval = setInterval(updateTime, 1000);
}


function toggleSettings() {
    settingsContainer.classList.toggle('-translate-y-full');
}


function saveDifficulty() {
    difficulty = difficultySelect.value;
    localStorage.setItem('difficulty', difficulty);
    toggleSettings();
    
    
    if (isGameOver) {
        restartGame();
    }
}


textInput.addEventListener('input', (e) => {
    const insertedText = e.target.value;
    
    
    if (insertedText === randomWord) {
        
        if (difficulty === 'easy') {
            time += 5;
        } else if (difficulty ==='medium') {
            time += 3;
        } else {
            time += 2;
        }
        
        
        if (time > 60) time = 60;
        
        
        timeElement.textContent = time;
        timeElement.classList.remove('text-danger', 'animate-pulse');
        
        
        updateScore();
        e.target.value = '';
        addWordToDOM();
    }
    
    
    if (randomWord.indexOf(insertedText) !== 0) {
        textInput.classList.add('border-danger');
    } else {
        textInput.classList.remove('border-danger');
    }
});

settingsBtn.addEventListener('click', toggleSettings);
closeSettingsBtn.addEventListener('click', saveDifficulty);
playAgainBtn.addEventListener('click', restartGame);


initGame();
    